<script setup>
import UNavbar from "../../uni_modules/uview-plus/components/u-navbar/u-navbar.vue";
import {ref} from "vue";
import {gamelist, paiming} from "../../request/api";
import {onLoad, onShareAppMessage, onShareTimeline} from "@dcloudio/uni-app";

const switchIndex = ref(0);//类型切换
const typeIndex = ref(0);//排行类型切换
const typeList = [
  {
    name: '积分',
    value: 1
  },
  {
    name: '得分',
    value: 2
  },
  {
    name: '平均\n得分',
    value: 3
  },
  {
    name: '总放炮',
    value: 4
  },
  {
    name: '放炮率',
    value: 5
  },
  {
    name: '大牌数',
    value: 6
  },
  {
    name: '大牌率',
    value: 7
  },
  {
    name: '平均\n顺位',
    value: 8
  },
  /*{
    name: '段位',
    value: 1
  },
  {
    name: '第一名\n概率',
    value: 1
  },
  {
    name: '第二名\n概率',
    value: 1
  },
  {
    name: '第三名\n概率',
    value: 1
  },
  {
    name: '第四名\n概率',
    value: 1
  },*/
];//排行类型列表
const rankingList = ref([]);//排名
const pageSize = ref({
  page: 0,
  size: 20,
  end_time:'',
  start_time:'',

});
onShareAppMessage(()=>{
  return {
    imageUrl:'/static/cover.png',
    path: '/pages/login/login',
  }
});
onShareTimeline(()=>{
  return{
    imageUrl:'/static/cover.png',
    path: '/pages/login/login',
  }
});
onLoad(() => {
  getRanking(false);
})
//获取排名
const getRanking = (isEmpty = false) => {
  uni.showLoading();
  if (typeof isEmpty === 'boolean' && isEmpty) {
    pageSize.value.page = 0;
    rankingList.value = [];
  }
  pageSize.value.page++;
  paiming({
    ...pageSize.value,
    type: typeList[typeIndex.value].value
  }).then(res => {
    res.data.forEach(item => {
      item.score = item.jifen_count
          || item.defen_count
          || item.defen_avg
          || item.dianpaoshu_count
          || item.dianpaolv_avg
          || item.dapaishu_sum
          || item.dapaishu_sum
          || item.dapailv_avg
          || item.pm_avg

      try {
        item.score = item.score.toFixed(2)
      }catch (e){}
    });
    uni.hideLoading();
    if (!res.data.length && rankingList.value.length) {
      uni.showToast({
        title: '已全部加载',
        icon: 'none'
      });
    }
    rankingList.value.push(...res.data);
  })
}
const getLastSecondOfDay = (year, month, day)=> {
  const date = new Date();
  date.setFullYear(year, month - 1, day); // 月份需要减去1，因为 JavaScript 中月份是从0开始的
  date.setHours(23, 59, 59, 999); // 设置为当天的最后一秒
  return Math.floor(date.getTime() / 1000); // 返回时间戳（秒级）
}
//时间筛选
const pickerChange = (e,field) => {
  pageSize.value[field] = parseInt(new Date(e.detail.value.replaceAll('-','/')).getTime()/1000)
  pageSize.value[field+'_str'] = e.detail.value;
}
const toUserPage = (mobile) => {
  uni.navigateTo({
    url:`/pages/other-user/other-user?mobile=${mobile}`
  })
}
</script>

<template>
  <view class="ranking">
    <u-navbar placeholder left-icon="" title="比赛详情"></u-navbar>
    <view class="container">
      <view v-if="false" class="switch">
        <view :class="{
          active:index===switchIndex
        }" v-for="(item,index) of ['个人数据','战队数据']" :key="index">
          <text>{{ item }}</text>
        </view>
      </view>
      <view class="query">
        <picker @change="pickerChange($event,'start_time')" mode="date">
          <view class="date-item">
            <text>{{pageSize.start_time_str || '开始时间'}}</text>
            <image src="/static/down.png"></image>
          </view>
        </picker>
        <text class="line">-</text>
        <picker @change="pickerChange($event,'end_time')" mode="date">
          <view class="date-item">
            <text>{{pageSize.end_time_str || '结束时间'}}</text>
            <image src="/static/down.png"></image>
          </view>
        </picker>
        <view @click="getRanking(true)" class="query-btn">查询</view>
      </view>

      <view class="ranking-list">
        <scroll-view style="width: 100rpx;height: 100%;" scroll-y>
          <view class="left">
            <text @click="()=>{
              typeIndex = index;
              getRanking(true);

            }" :class="{
              active:index ===  typeIndex
            }" v-for="(item,index) of typeList" :key="index">{{ item.name }}
            </text>
          </view>

        </scroll-view>
        <view class="right">
          <view class="header">
            <text style="margin-right: 139rpx;">排行</text>
            <text style="margin-right: 56rpx;">运动员</text>
            <text style="margin-right: 105rpx;">段位</text>
            <text>{{ typeList[typeIndex].name }}</text>
          </view>
          <scroll-view @scrolltolower="getRanking(false)" scroll-y class="scroll-y">
            <view class="user-list">
              <view v-for="(item,index) of rankingList" :key="index" class="item">
                <view class="sort">
                  <image v-if="index===0" src="/static/one.png"></image>
                  <image v-else-if="index===1" src="/static/two.png"></image>
                  <image v-else-if="index===2" src="/static/three.png"></image>
                  <text v-else>{{ index + 1 }}</text>
                </view>
                <view @click="toUserPage(item.mobile)" class="user">
                  <image :src="item.image || '/static/cover.png'"></image>
                  <text>{{ item.name }}</text>
                </view>
                <view class="team">{{ item.duanwei || '暂无' }}</view>
                <view class="score">{{ item.score ||0 }}</view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.ranking {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #fff;

  .container {
    width: 100%;
    height: 0;
    flex: 1;
    border-top: 1px solid #F5F5F5;
    display: flex;
    flex-direction: column;

    .ranking-list {
      height: 0;
      width: 100%;
      display: flex;
      flex: 1;
      margin-top: 36rpx;

      .right {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        height: 100%;
        margin-left: 20rpx;

        .user-list {
          width: 100%;
          display: flex;
          flex-direction: column;

          .item {
            width: 100%;
            padding: 28rpx 0 17rpx 0;
            display: flex;
            align-items: center;

            .score {
              font-weight: 400;
              font-size: 24rpx;
              color: #333333;
              line-height: 24rpx;
            }

            .team {
              width: 151rpx;
              font-weight: 400;
              font-size: 24rpx;
              color: #333333;
              line-height: 24rpx;
            }

            .user {
              display: flex;
              align-items: center;
              width: 210rpx;

              image {
                width: 64rpx;
                height: 64rpx;
                border-radius: 50%;
                margin-right: 32rpx;
              }

              text {
                width: 80rpx;
               /* overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;*/
                font-weight: 400;
                font-size: 24rpx;
                color: #333333;
              }
            }

            .sort {
              width: 139rpx;
              display: flex;
              justify-content: center;

              text {
                width: 44rpx;
                height: 44rpx;
                background: linear-gradient(-51deg, #F5DFCE, #E6B083);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-weight: 800;
                font-size: 24rpx;
                color: #844E24;
              }

              image {
                width: 62rpx;
                height: 44rpx;
              }
            }
          }
        }

        .header {
          width: 100%;
          padding-left: 39rpx;
          display: flex;
          align-items: center;
          height: 68rpx;
          background: #F5F5F5;
          border-radius: 34rpx 0rpx 0rpx 34rpx;
          font-weight: 500;
          font-size: 24rpx;
          color: #2D6E37;
        }
      }

      .left {
        width: 100%;
        display: flex;
        gap: 30rpx;
        flex-direction: column;

        text {
          font-weight: 400;
          font-size: 24rpx;
          color: #333333;
          width: 100%;
          display: flex;
          height: 80rpx;
          justify-content: center;
          align-items: center;
          text-align: center;

          &.active {
            color: #2D6E37;
            font-weight: 500;
          }
        }
      }
    }

    .query {
      padding: 0 30rpx;
      display: flex;
      align-items: center;
      margin-top: 20rpx;

      .query-btn {
        flex-grow: 1;
        margin-left: 31rpx;
        width: 132rpx;
        height: 64rpx;
        background: #F5F5F5;
        border-radius: 12rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        font-size: 24rpx;
        color: #2D6E37;
      }

      .line {
        font-weight: 400;
        margin: 0 23rpx;
        font-size: 24rpx;
        color: #555555;
      }

      .date-item {
        width: 236rpx;
        height: 64rpx;
        background: #FFFFFF;
        border-radius: 16rpx;
        border: 1px solid #CCCCCC;
        padding: 0 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        text {
          font-weight: 400;
          font-size: 24rpx;
          color: #888888;
        }

        image {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }

    .switch {
      width: 100%;
      height: 100rpx;
      display: flex;
      align-items: center;

      view {
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        font-size: 32rpx;
        color: #999999;

        &.active {
          color: #333;

          text {
            position: relative;

            &:before {
              content: "";
              position: absolute;
              width: 100rpx;
              opacity: 0.5;
              height: 13rpx;
              background: linear-gradient(90deg, #48BE5A, #FFFFFF);
              bottom: -2rpx;
              left: 0;
            }
          }

        }
      }
    }

  }
}
</style>
